<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="icon" href="https://cdn.jsdelivr.net/npm/@bootcss/v3.bootcss.com@1.0.10/favicon.ico">
    <link rel="canonical" href="https://getbootstrap.com/docs/3.4/examples/signin/">

    <title>Signin Template for Bootstrap</title>

    <!-- Bootstrap core CSS -->
    <link href="https://cdn.jsdelivr.net/npm/@bootcss/v3.bootcss.com@1.0.10/dist/css/bootstrap.min.css" rel="stylesheet">

    <!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
    <link href="https://cdn.jsdelivr.net/npm/@bootcss/v3.bootcss.com@1.0.10/assets/css/ie10-viewport-bug-workaround.css" rel="stylesheet">

    <!-- Custom styles for this template -->
    <link href="https://cdn.jsdelivr.net/npm/@bootcss/v3.bootcss.com@1.0.10/examples/signin/signin.css" rel="stylesheet">
    <style>
        #btns {
            height: 100%;
            background-color: aqua;
            width: 100%;
            background-image: url(https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/1c3e97686468231f3f78048d7f2b7fdc.jpg?thumb=1&w=1533&h=575&f=webp&q=90);
        }
        
        #btnsb {
            height: 600px;
            width: 1000px;
        }
        
        .container {
            margin-left: 500px;
        }
    </style>
</head>

<body>
    <div id="btns">
        <div class="container" id="btnsb">

            <form action="javascript:void(0)" class="form-signin" class="form-horizontal col-md-4 col-md-offset-4">
                <h2 class="form-signin-heading">用户注册</h2>
                <div class="form-group">
                    <label for="username" class="control-label">用户名</label>
                    <input type="text" id="username" class="form-control" autocomplete="off">
                </div>
                <div class="form-group">
                    <label for="password" class="control-label">密码</label>
                    <input type="text" class="form-control" autocomplete="off" id="password">
                </div>
                <div class="form-group">
                    <label for="rpassword" class="control-label">请重新输入密码</label>
                    <input type="text" class="form-control" id="rpassword" autocomplete="off">
                </div>
                <div class="form-group">
                    <label for="nickname" class="control-label">用户昵称</label>
                    <input type="text" class="form-control" id="nickname" autocomplete="off">
                </div>

                <button class="btn btn-lg btn-primary btn-block" id="btn">注册</button>
            </form>
        </div>
    </div>

</body>
<script>
    var btn = document.getElementById("btn");
    var username = document.getElementById("username");
    var password = document.getElementById("password");
    var rpassword = document.getElementById("rpassword");
    var nickname = document.getElementById("nickname");
    btn.onclick = async function() {
        let url = "http://127.0.0.1:8888/users/register";
        let options = {
            method: "POST",
            headers: {
                "Content-Type": "application/x-www-form-urlencoded"
            },
            body: `username=${username.value}&password=${password.value}&rpassword=${rpassword.value}&nickname=${nickname.value}`
        };
        let response = await fetch(url, options)
        let data = await response.json()
        console.log(data)
        if (data.code === 1) {
            alert("注册成功，")
            setTimeout(function() {
                location.href = "./login.html"
            }, 2000)
        } else {
            alert(data.message);
        }
    }
</script>
<script src="./libs/javascripts/jQuery.js"></script>
<script src="./libs/javascripts/cookis.js"></script>

</html>